<template>
  <div class="admin">
    <!-- <router-view></router-view> -->
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
    <div class="navListCore">
      <!-- <NavList :navData="navData"></NavList> -->
      <sidebar class="sidebar-container"></sidebar>
    </div>
    <div class="adminShow">
      <div class="adminHeader">
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-if="navData[routerIndex].name" :to="{ name: navData[routerIndex].router }">{{navData[routerIndex].name}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: navData[routerIndex].children[routerIndex2].router }">{{childrenName}}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="childrenName !== $route.meta.title">{{$route.meta.title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="user">
          <div class="userBox" @mouseover="isShowInfo=true" @mouseout="isShowInfo=false">
            <i class="iconfont pc-user-o"></i>
            <div class="text">
              <span class="value">{{name}}</span>
            </div>
            <transition name="el-zoom-in-top">
              <div class="showBox" v-show="isShowInfo">
                <div class="userInfo">
                  <!-- <router-link tag="span" class="userBtn" :to="{name:'adminInfo'}">个人中心</router-link> -->
                  <span class="userBtn" @click="loginOut">退出登录</span>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div class="adminBody">
        <el-scrollbar class="helpScroll" :viewStyle="viewStyle">
          <div class="routerBox">
            <router-view></router-view>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
// import NavList from '@/base/navList/navList'
import { Sidebar } from '../layout/components'
import ResizeMixin from '../layout/mixin/ResizeHandler'
import Avator from '@/assets/images/avator.jpg'
import { mapGetters } from 'vuex'
export default {
  name: 'admin',
  components: {
    Sidebar
  },
  mixins: [ResizeMixin],
  data () {
    return {
      routerIndex: 0,
      routerIndex2: 0,
      childrenName: '',
      Avator,
      name: '',
      userId: 1,
      isShow: false,
      isShowInfo: false,
      viewStyle: {
        position: 'relative'
      },
      navData: [
        {
          name: '统计分析',
          router: 'statisticalAnalysis',
          children: [
            {
              name: '用户分析',
              router: 'userAnalysis'
            },
            {
              name: '订单分析',
              router: 'orderAnalysis'
            },
            {
              name: '空间分析',
              router: 'spaceAnalysis'
            }
          ]
        },
        {
          name: '管理',
          router: 'adminControl',
          children: [
            {
              name: '用户管理',
              router: 'userControl'
            },
            {
              name: '空间管理',
              router: 'spaceControl'
            },
            {
              name: '订单管理',
              router: 'orderControl'
            },
            {
              name: '卡劵管理',
              router: 'voucherControl'
            },
            {
              name: '充值管理',
              router: 'rechargeControl'
            },
            {
              name: '入驻申请',
              router: 'applicationAdmission'
            }
          ]
        },
        {
          name: '设置',
          router: 'setting',
          children: [
            {
              name: '权限设置',
              router: 'permissionSetting'
            }
          ]
        }
      ]
    }
  },
  computed: {
    apiParams () {
      return {
        // pageSize: this.pageSize,
        // pageNo: this.pageNo,
        // name: this.name,
        // id: this.oneCategory
      }
    },
    ...mapGetters([
      'userInfo'
    ]),
    sidebar () {
      return this.$store.state.app.sidebar
    },
    classObj () {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  mounted () {
  },
  created () {
    this.activeIndex()
    this.name = this.userInfo.userName
    console.log(this.name)
  },
  watch: {
    $route (to, from) {
      this.activeIndex()
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'userInfo'
  //   ])
  // },
  methods: {
    loginOut () {
      //   this.removeUserInfo()
      this.$axios.post('/api/sysUser/logout', {
        userId: this.userInfo.userId
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
        }
      })
      this.$router.push({ name: 'login' })
    },
    handleClickOutside () {
      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
    },
    activeIndex () {
      // let route = this.$route.path.split('/')[this.$route.path.split('/').length - 1]
      console.log(this.$route.path)
      for (let item of this.navData) {
        if (this.$route.path.indexOf(item.router) !== -1) {
          this.routerIndex = this.navData.indexOf(item)
          if (this.navData[this.routerIndex].children) {
            for (let item2 of this.navData[this.routerIndex].children) {
              if (this.$route.path.indexOf(item2.router) !== -1) {
                this.routerIndex2 = this.navData[this.routerIndex].children.indexOf(item2)
                this.childrenName = this.navData[this.routerIndex].children[this.routerIndex2].name
              }
            }
          }
        }
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../assets/stylus/variable'
.admin
  display flex
  width 100%
  height 100%
  overflow hidden
  background $bg-theme
  .navListCore
    flex none
  .adminShow
    flex 1
    display flex
    flex-direction column
    overflow hidden
    .adminHeader
      flex 0 0 50px
      background $bg-normal
      display flex
      z-index 99
      box-shadow $shadow
      .breadcrumb
        flex 1
        padding-top 16px
        padding-left 16px
      .user
        flex none
        display flex
        .userBox
          padding 16px
          display flex
          align-content center
          justify-content center
          position relative
          &:hover
            cursor pointer
            .iconfont
              color $color-theme
            .text
              .value
                color $color-theme
          .iconfont
            font-size $font-size-heig
          .text
            flex none
            margin-left 12px
            display flex
            justify-content center
            font-size 0
            flex-direction column
            .value
              flex none
              font-size $font-size-small
              color $color-text
            .num
              flex none
              border-radius 10px
              background $color-danger
              font-size $font-size-mini
              color $bg-normal
              padding 3px 5px
          .showBox
            position absolute
            top 49px
            right 0
            background #fff
            box-shadow $shadow
            .userInfo
              width 120px
              display flex
              flex-direction column
              .userBtn
                flex 1
                padding 12px 0
                text-align center
                border-top 1px solid $color-border
                box-sizing border-box
                &:hover
                  cursor pointer
                  background $color-border
                &:last-child
                  border-bottom none
            .userMessage
              width 300px
              box-shadow $shadow
              .messageHeader
                width 100%
                height 36px
                background $color-border
                padding 0 20px
                box-sizing border-box
                display flex
                justify-content space-between
                .title, .btn
                  font-size $font-size-small
                  line-height 36px
                .btn
                  color $color-theme
                  cursor pointer
              .messageBottom
                width 100%
                text-align center
                padding-top 22px
                padding-bottom 17px
                font-size $font-size-small
                color $color-text
                border-top 1px solid $color-border
                &:hover
                  color $color-theme
              .messageBody
                .messageOne
                  box-sizing border-box
                  width 100%
                  padding 10px 20px
                  &:hover
                    background #F5F7FA
                    .title
                      color $color-theme
                  .title
                    margin-bottom 8px
                    font-size $font-size-small
                    color $color-text
                    text-overflow ellipsis
                    white-space nowrap
                    overflow hidden
                  .time
                    font-size $font-size-small
                    color $color-text-d
                    text-indent 5px
    .adminBody
      flex 1
      overflow hidden
      display flex
      flex-direction column
      overflow hidden
      .helpScroll
        width 100%
        height 100%
        .routerBox
          min-width 1000px
          overflow hidden
          overflow-y auto
          height 100%
</style>
